<%@ page import="com.ddz.model.User" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/22
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/game.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<%
  User user = (User) session.getAttribute("User");
  if (user == null){
    response.sendRedirect("../login.jsp");
  }
  else {
    String userid = user.getUserId();
    String roomid = user.getRoomid();
    session.setAttribute("userid",userid);
    session.setAttribute("roomid",roomid);
  }
%>
<body>
<%--广告--%>
<div class="ad-popup" id="adPopup">
  <a href="https://www.baidu.com" target="_blank" style="margin: 0px;padding: 0px">
  <img src="../resources/img/ad.png" alt="广告图片">
  </a>
  <button id="closeAd" class="close-button">×</button>
</div>

<!-- 等待界面 -->
<div id="waiting-screen" class="waiting-screen">
  <div class="loader">等待其他玩家加入...</div>
</div>

<div class="top">
  <!-- 左侧容器：音乐按钮、音量调节和语音包 -->
  <div class="left-controls">
    <div class="music-controls">
      <button id="bgm" class="music-button">
        <i class="fas fa-music"></i>
      </button>
      <input type="range" id="volume-slider" min="0" max="1" step="0.1" value="1">
    </div>
    <!-- 卢本伟语音包 -->
    <select id="lbw">
      <option value="卢本伟语音包" selected disabled>卢本伟语音包</option>
      <option value="other1">赌怪</option>
      <option value="other2">得得得得得得</option>
      <option value="other3">单走一个6**</option>
      <option value="other4">盖亚！</option>
      <option value="other5">给阿姨倒一杯茶</option>
      <option value="other6">17张牌你能秒我？</option>
    </select>
  </div>
  <!-- 居中内容 -->
  <div class="pokers_top"></div>
</div>

<div class="main">
  <div class="left">
    <div class="player-info">
      <div class="player-img" id="left_img"></div>
      <div class="player-details" id="left_info">
        <span id="left_name">玩家名称</span>
        <span id="left_hand"></span>
        <span id="left_score">积分</span>
      </div>
    </div>
    <div class="player-msg" id="left_msg"></div>
  </div>

  <div class="center">
    <div class="pokers_center"></div>
  </div>

  <div class="right">
    <div class="player-info">
      <div class="player-img" id="right_img"></div>
      <div class="player-details" id="right_info">
        <span id="right_name">玩家名称</span>
        <span id="right_hand"></span>
        <span id="right_score">积分</span>
      </div>
    </div>
    <div class="player-msg" id="right_msg"></div>
  </div>
</div>

<div class="bottom">
  <div class="player-msg" id="self_msg"></div>
  <div class="player-info">
    <div class="player-img" id="self_img"></div>
    <div class="player-details" id="self_info">
      <span id="self_name">玩家名称</span>
      <span id="self_hand"></span>
      <span id="self_score">积分</span>
    </div>
  </div>
  <div>
    <button id="qdz">抢地主</button>
    <button id="pass">要不起</button>
    <button id="hand">出牌</button>
  </div>

  <div>
    <input type="text" id="usermsg" name="usermsg" placeholder="请输入要发送的消息">
    <button id="massage">发送</button>
  </div>

  <span id="alert" style="color: black;"></span>

  <div class="Pokers"></div>
</div>

<script type="text/javascript" src="../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="../js/poker.js"></script>
<script type="text/javascript" src="../js/game.js"></script>
<script type="text/javascript" src="../js/music.js"></script>
<script type="text/javascript" src="../js/sweetalert2@11.js"></script>
<script>
  // 定义显示广告弹窗的函数
  function showAdPopup() {
    var adPopup = document.getElementById('adPopup');
    // 添加动画类名触发显示动画
    adPopup.classList.add('show');
    adPopup.style.display = 'block';
  }

  // 定义隐藏广告弹窗的函数
  function hideAdPopup() {
    var adPopup = document.getElementById('adPopup');
    // 添加渐隐动画类名触发渐隐关闭动画
    adPopup.classList.add('fade-out');
    // 移除动画类名触发隐藏动画
    adPopup.classList.remove('show');
    setTimeout(function () {
      adPopup.style.display = 'none';
    }, 300); // 延迟一定时间隐藏
  }

  // 页面加载完成后弹出提示框
  window.onload = function() {
    Swal.fire({
      title: '温馨提示',
      text: '请不要刷新页面，否则可能会导致游戏中断！',
      icon: 'warning', // 图标类型：warning、error、success、info 等
      confirmButtonText: '我知道了',
      confirmButtonColor: '#007BFF', // 按钮颜色
    }).then(() => {
      // 提示框关闭后，调用显示广告弹窗的函数
      showAdPopup();

      // 获取关闭按钮元素并添加点击事件处理函数
      var closeButton = document.getElementById('closeAd');
      closeButton.addEventListener('click', function () {
        hideAdPopup();
      });
    });
  };
</script>
<script>
  var userid = "${userid}";
  var roomid= "${roomid}";
  if (roomid == null || roomid == "" || roomid == undefined ||
          userid == null || userid == "" || userid == undefined){
    window.location.href = "../index.jsp";
  }

  console.log("用户id：" + userid);
  console.log("房间号：" + roomid);
  try{
    connect(roomid, userid);
  }catch (E){
    console.log("连接失败...正在返回首页");
    alert("连接失败...正在返回首页");
    window.location.href = "../index.jsp";
  }
</script>
</body>
</html>